<template>
  <div padding="20px">
    <h2 align="center">Soak Tank Monitor</h2>
    <div align="center">
      <Grid column-num="2" padding="20px" style="width: 75%" align="center" border center clickable gutter="2px">
        <GridItem>
          <Button type="info" round size="normal">AUTO</Button>
        </GridItem>
        <GridItem>
          <Button type="info" round size="normal" to="/tank/set">Setting</Button>
        </GridItem>
        <template v-for="item of devices">
          <GridItem :text="item.name" :key="item.id" @click="clickGridItem(item)" icon="./tank.png"
                    :badge="item.state||'Normal'" style="padding:0px;margin:0px">
            <div v-if="currentId===item.id" style="border:2px solid blue;width:90px;height:90px;border-radius: 5px;">
              <div :style="item.state==='alarm'?'width:100%;height:100%;background: red':'width:100%;height:100%;'">
                <img height="56" width="64" src="./tank.png" :alt="item.name">
                <br> {{item.name}}
              </div>
            </div>
            <div v-else style="border:0px;width:100%;height:100%;border-radius: 5px;">
              <div :style="item.state==='alarm'?'width:100%;height:100%;background: red':'width:100%;height:100%;'">
                <img height="56" width="64" src="./tank.png" :alt="item.name">
                <br>{{item.name}}
              </div>
            </div>
          </GridItem>
        </template>
      </Grid>
    </div>
    <Button @click="onTest" type="danger" round size="large">
      <div v-if="currentId>0">Test</div>
      <div v-else>Monitor</div>
    </Button>
  </div>
</template>

<script>
  import {Button, Col, Collapse, CollapseItem, Grid, GridItem, Row} from 'vant'
  import gql from 'graphql-tag'

  export default {
    name: "Tank",
    components: {Row, Col, Collapse, CollapseItem, Grid, GridItem, Button},
    data() {
      return {
        devices: {},
        current: null,
        currentId: 0
      }
    }, apollo: {
      devices() {
        return {
          query: gql`query qdv{
                   devices:allMesDevices{
                   id
                name
    propertyIds {
      name
    }
          }
         }`,
          variables() {
            return {}
          },
          skip() {
            return false
          }
        }
      }
    }, watch: {},
    methods: {
      onTest() {

        if (this.current) {
          this.current.state = 'alarm'
          this.$forceUpdate()
        }
      }, clickGridItem(item) {
        for (let i of this.devices) i.state = null
        if (this.current === item) {
          this.current = null
          this.currentId = 0
          item.state = null
        }
        else {
          this.current = item
          this.currentId = item.id
        }
      }
    }
  }
</script>

<style scoped>

</style>
